<template>
  <div class="main">
    <div class="list">
      <el-card v-for="item in recordList" :key="item.id" class="post-card">
        <div>
          <div class="name">岗位：{{ item.name }}</div>
          <div class="time">投递时间：{{ item.createTime }}</div>
          <div class="salary">{{ item.minSalary }}-{{ item.maxSalary }}元</div>
          <div>
            <el-alert
              :title="statusList[item.status].title"
              :type="item.status % 2 == 0 ? 'success' : 'error'"
              effect="dark"
              show-icon
              :closable="false"
              :description="`${statusList[item.status].description}${item.status == 2 ? item.interviewTime : ''}`">
            </el-alert>
          </div>
        </div>
      </el-card>
    </div>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :current-page.sync="current"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
      :page-sizes="[10, 15, 20, 25, 30, 50, 80, 100]"
      hide-on-single-page>
    </el-pagination>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['id']),
  },
  data() {
    return {
      recordList: [],
      current: 1,
      size: 10,
      total: 0,
      statusList: {
        0: { title: '筛选中', description: '您的简历筛选中,请等待筛选结果' },
        1: { title: '筛选未通过', description: '您的简历未通过筛选,谢谢您的投递!' },
        2: { title: '待面试', description: '您的简历已通过筛选,请做好面试准备!面试时间如下:\n' },
        3: { title: '面试未通过', description: '您的简历面试未通过,谢谢您的投递!' },
        4: { title: '面试通过', description: '恭喜您!您的简历面试通过!请等待Offer发放,后续入职事项敬请联系HR!' },
      },
    }
  },
  created() {
    this.getRecord()
  },
  methods: {
    // 获取简历记录
    getRecord() {
      this.$store.dispatch('resume/lookPostList', { current: this.current, size: this.size, userId: this.id }).then((res) => {
        this.recordList = res.data
        this.total = parseInt(res.other.pageSize)
      })
    },
    getSteps(value) {},
    //  更改每页大小
    changePageSize(val) {
      this.size = val
      this.getRecord()
    },
    //  更改当前显示页码
    changeCurrentPage(val) {
      this.current = val
      this.getRecord()
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  margin-top: 70px;
  border: 1px solid white;
  width: 80%;
  height: 83vh;
  margin-left: 10%;
  overflow: auto;
  .list {
    height: 90%;
    overflow: auto;
    .post-card {
      margin-top: 2%;
      width: 80%;
      margin-left: 10%;
      .salary {
        font-size: 20px;
        color: yellow;
        text-align: right;
      }
    }
  }
}
</style>
